<template>
	<div style="height: 80vh">
		<div style="display: flex; justify-content: space-between">
			<h3>班级管理</h3>
			<h4>当前状态:{{ stateName[state] }}</h4>
			<h4><button @click="go2Add()">添加新班级</button></h4>
		</div>

		<div style="display: flex">
			<div style="width: 78%">
				<table border="1" style="width: 95%">
					<tr style="background-color: gainsboro">
						<th>班级编号</th>
						<th>班级名称</th>
						<th>修改操作</th>
						<th>删除操作</th>
					</tr>
					<tr v-for="clz in clzs">
						<td>{{ clz.clzno }}</td>
						<td>{{ clz.clzname }}</td>
						<td><button @click="go2Update(clz)">修改</button></td>
						<td><button @click="del(clz.clzno)">删除</button></td>
					</tr>
				</table>
			</div>
			<div style="width: 20%">
				<table>
					<tr>
						<td>班级编号:</td>
						<td><input type="text" v-model="clz.clzno" v-bind:readonly="state != 1" /></td>
					</tr>
					<tr><br /></tr>
					<tr>
						<td>班级名称:</td>
						<td><input type="text" v-model="clz.clzname" /></td>
					</tr>
					<tr><br /></tr>
					<tr>
						<td colspan="2">
							<button style="width: 100%;height: 100%;" @click="doUpdate()" v-show="state == 0">修改</button>
							<button style="width: 100%;height: 100%;" @click="doAdd()" v-show="state == 1">添加</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'AdmClz',
	data() {
		return {
			clzs: [],
			clz: {},
			stateName: ['修改...', '添加...', '显示...'],
			state: 2
		};
	},
	methods: {
		del(clzno) {
			console.dir('删除的编号 : ' + clzno);
			var that = this; // 此时this指向vm
			this.$axios.get(`${this.$ip}/api/adm/clz/del?clzno=` + clzno, this.$store.state.user.to).then(function (resp) {
				console.log(resp.data);
				that.clzs = resp.data.data;
			});
		},
		go2Update(obj) {
			console.dir(obj);
			this.clz = obj;
			this.state = 0;
		},
		doUpdate() {
			var that = this;
			console.dir(this.clz);
			let clz = new FormData();
			clz.append('clzno', this.clz.clzno);
			clz.append('clzname', this.clz.clzname);
			this.$axios.post(`${this.$ip}/api/adm/clz/update`, clz, this.$store.state.user.to).then(function (resp) {
				that.$store.commit('show', resp.status + ': ' + resp.data.msg);
				console.log(resp.data);
				console.dir(resp.data.data);
				that.clzs = resp.data.data;
			});
		},
		go2Add() {
			this.state = 1;
			this.clz = {};
		},
		doAdd() {
			let clz = new FormData();
			clz.append('clzno', this.clz.clzno);
			clz.append('clzname', this.clz.clzname);
			var that = this;
			this.$axios.post(`${this.$ip}/api/adm/clz/add`, clz, this.$store.state.user.to).then(function (resp) {
				that.$store.commit('show', resp.status + ': ' + resp.data.msg);
				console.log(resp.data);
				that.clzs = resp.data.data;
			});
		}
	}, //methods 结束
	mounted() {
		var that = this;
		this.$axios.get(`${this.$ip}/api/adm/clz/findAll`,this.$store.state.user.to).then(function (resp) {
			console.log(resp.data);
			that.clzs = resp.data.data;
		});
	}
};
</script>
#mm {height: 100%;}
<style></style>
